<template>
  <div>
    <section class="" data-aos="fade-up" v-if="culture">
      <div class="container">
        <div class="row">
          <div class="col-md-6 pt-4 float-right">
            <!-- 定义临时变量 -->
            {{ void (temp = jsonStringTojsObject(culture.contentDescription)) }}
            <h3>使命</h3>
            <p class="font-italic">
              {{ temp.mission }}
            </p>
            <h3>愿景</h3>
            <p>{{ temp.vision }}</p>
            <h3>价值观</h3>
            <p>{{ temp.values }}</p>
          </div>
          <div class="col-md-6 pt-4" style="min-height: 500px">
            <img
              :src="require('@/assets/img/win-win.png')"
              class="img-fluid w-50"
              alt=""
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getArticleById, imgUrl, jsonStringTojsObject } from "@/api/index.js";

//1505120661998231554
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      culture: null,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.init();
    });
    //
    const methods = {
      imgUrl,
      jsonStringTojsObject,
      init: () => {
        getArticleById("1505120661998231554").then((res) => {
          data.culture = res.data;
        });
      },
    };
    return {
      ...refData,
      //
      ...methods,
    };
  },
};
</script>
<style scoped></style>
